<template>
	<view>
		<view class="bgs">
			<view class="bgbox">
				<view class="fa">时光匆匆</view>
				<view class="fb">您的评价能帮助到想买的人</view>
				<view class="fc">从多个角度评价.让其它用户更了解产品</view>
				<textarea v-model='textareaval' placeholder="添加评论..."  class="textarea"/>
				
				<!-- 图片上传 -->
				<view v-for="(item, index) in carsimgs" :key="index" class="shangchuan_view" v-if="item.img!=''">
					<image @tap="upthiscarsimgs" class="shangchuan_Img_close" :data-index="index" src="/static/pages/image/tupiangb_btn.png"></image>
					<image @tap="showimgs" class="shangchuan_Img" :data-index="index" :src="item.img"></image>
				</view>
				<view class="shangchuan_view" v-if="carsimgs.length<1&&tid==''">
					<image @tap="upcarsimgs" class="shangchuan_Img" src="/static/pages/image/tianjiantp_btn.png"></image>
				</view>
				<view class="shangchuan_view" v-if="carsimgs.length<1&&tid!=''">
					<image @tap="upcarsimgs" class="shangchuan_Img" src="/static/pages/image/tianjiantp_btn.png"></image>
				</view>
				
				
			</view>
			<view class="btns" @click="submitbtn()">
				确认
			</view>
			
		</view>
	</view>
</template>

<script>
	var app = getApp();
	export default {
		data() {
			return {
				textareaval:'',
				carsimgs: [],
				ids:''
			}
		},
		onLoad(option) {
			console.log(option.id);
			this.ids = option.id
		},
		methods: {
			submitbtn(){
				uni.showToast({
					title: '请填写评论',
					icon:'none',
					duration: 1000
				});
				app.globalData.util.request({
					url: "entry/wxapp/Api",
					data: {
						m: "monai_market",
						r: "goods.index.commentadd",
						uid:wx.getStorageSync('uid'),  //用户id
						goods_id:this.ids  ,//商品id
						value:this.textareaval, //评论内容
						image:JSON.stringify(this.carsimgs) // 图片数组
					},
					success:function(res){
						console.log(res)
						if(res.data.message == "评价成功"){
							uni.redirectTo({
								url:'/pagesA/myOrders/myOrders'
							})
						}
					}
				});	
				// console.log(this.textareaval+"uid"+wx.getStorageSync('uid')+'/商品id'+this.ids+);
			},
			addinimgs: function (a) {
			  console.log(a);//图片地址
			  var t = this.carsimgs,
				  e = {
				img: a.all,
				imgshort: a.short
			  };
			  console.log(t);
			  t.push(e), this.setData({
				carsimgs: t
			  });
			  console.log(this.carsimgs);
			},
			upthiscarsimgs: function (a) {
			  var t = a.currentTarget.dataset.index,
			      e = this.carsimgs;
			  app.globalData.util.request({
			    url: "entry/wxapp/Api",
			    data: {
			      m: "monai_market",
			      uid: app.globalData.getuid(),
			      imgurl: e[t].img,
			      r: "Upimg.delImg"
			    }
			  }), e.splice(t, 1), this.setData({
			    carsimgs: e
			  });
			  console.log(this.carsimgs);
			},
			showimgs() {
			  console.log("占位：函数 showimgs 未声明");
			},
			//上传图片
			upcarsimgs: function (a) {
			  var e = this;
			  9 <= e.carsimgs.length ? app.globalData.util.message({
			    title: "您添加的图片已经很多了",
			    type: "error"
			  }) : app.globalData.upimgs({
			    scannums: 9,
			    filename: "cars",
			    success: function (a) {
			      for (var t in a) e.addinimgs(a[t]);
			    }
			  });
			},
		}
	}
</script>

<style>
	.bgs{
		width: 100%;
		height: 260upx;
		background-color: #0ebfa9;
		padding-top: 60upx;
		box-sizing: border-box;
	}
	.bgbox{
		width: 90vw;
		height: 850upx;
		background: #FFFFFF;
		box-shadow: 0px -10px 40px 0px rgba(11, 199, 179, 0.3);
		border-radius: 16px;
		margin: auto;
	}
	.btns{
		width: 90vw;
		height: 105upx;
		background: linear-gradient(141deg, #0CD8C2, #0BC2AE);
		border-radius: 53upx;
		margin: auto;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 78upx;
		color:#FFF;
		font-weight: 500;
	}
	.fa{
		font-size: 37upx;
		font-weight: 500;
		color: #242E42;
		text-align: center;
		padding-top: 77upx;
	}
	.fb{
		font-size: 45upx;
		font-weight: 800;
		color: #FD6A32;
		text-align: center;
		padding-top: 69upx;
	}
	.fc{
		text-align: center;
		padding-top: 33upx;
		font-size: 24upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #8A8A8F;
		
	}
	.textarea{
		/* background-color: red; */
		margin: auto;
		margin-top: 77upx;
		height: 220upx;
	}
	.shangchuan_view {
	    height: 165rpx;
	    width: 165rpx;
	    margin-left: 19rpx;
	    display: inline-block;
	    margin-top: 20rpx;
	    position: relative;
	}
	
	.shangchuan_Img {
	    position: absolute;
	    height: 165rpx;
	    width: 165rpx;
	}
	
	.shangchuan_Img_close {
	    float: right;
	    height: 38rpx;
	    z-index: 5;
	    position: relative;
	    width: 38rpx;
	}
	
	.bufa_btn {
	    background: #0AC2AE;
	    border-radius: 15rpx;
	    height: 72rpx;
	    width: 690rpx;
	    margin: 0 auto;
	    margin-top: 40rpx;
	    display: block;
	    text-align: center;
	    font-size: 28rpx;
	    color: #FFFFFF;
	    line-height: 72rpx;
	}
	
	.jinggao {
	    font-size: 24rpx;
	    color: #9295A8;
	    width: 100%;
	    line-height: 80rpx;
	    text-align: center;
	}
	
	.must_red {
	    color: red;
	}
	
	.textarea_text {
	    position: relative;
	    z-index: 1000;
	    width: 650rpx;
	    padding-left: 20rpx;
	    padding-right: 20rpx;
	    height: 310rpx;
	    margin: 0 auto;
	    margin-top: -310rpx;
	    font-size: 24rpx;
	    color: #888888;
	}
	
	.textarea_text_active {
	    color: #333;
	}
	
	.dizhi_area {
	    width: 385rpx;
	    margin-top: 18rpx;
	    color: #9295A8;
	    font-size: 24rpx;
	    margin-left: 20rpx;
	    line-height: 50rpx;
	    display: inline-block;
	    height: 110rpx;
	}
	
	.car_messageView {
	    width: 690rpx;
	    margin: 0 auto;
	    height: 88rpx;
	    border-bottom: 1rpx solid #f0f0f0;
	}
	
	.car_messageView_input {
	    width: 600rpx;
	    float: left;
	    height: 88rpx;
	    color: #333;
	    font-size: 24rpx;
	}
	
	.car_messageView_sc {
	    width: 90rpx;
	    float: left;
	    font-size: 24rpx;
	    color: #F75F5F;
	    text-align: right;
	    height: 88rpx;
	    line-height: 88rpx;
	}
	
	.shangchuan_view_border {
	    width: 100%;
	    margin-top: -15rpx;
	}
	
	.kefu_modle {
	    position: fixed;
	    top: 70rpx;
	    padding: 0;
	    width: 150rpx;
	    background: #fff;
	    margin: 0;
	    right: 10rpx;
	    z-index: 999;
	}
	
	.kefu_modle_img {
	    height: 100rpx;
	    background: #fff;
	    border-radius: 100%;
	    margin: 0 auto;
	    display: block;
	    width: 100rpx;
	}
	
	.kefu_modle_title {
	    width: 100%;
	    font-size: 27rpx;
	    color: #666666;
	    text-align: center;
	    line-height: 80rpx;
	}
	
	button::after {
	    border: none;
	}
	
	.btm_input {
	    width: 340rpx;
	    position: absolute;
	    right: 180rpx;
	}
	.del_butt{
	    position: absolute;
	    right: -140rpx;
	    bottom: 0;
	    width: 100rpx;
	    height: 50rpx;
	    font-size: 24rpx;
	    padding: 0;
	    line-height: 50rpx;
	
	}
	.mach_det{
	    width: 100%;
	    height: 100vh;
	    position: fixed;
	    top: 0;/*  #ifdef  H5  */
	    top: calc(88rpx + constant(safe-area-inset-top));
	    top: calc(88rpx + env(safe-area-inset-top));/*  #endif  */
	    left: 0;
	    background: #fff;
	    z-index: 1000;
	    overflow-y: auto;
	  }
	  .mach_tit_box{
	    width: 100%;
	    height: 80rpx;
	    line-height: 80rpx;
	    margin: auto;
	    font-size: 28rpx;
	    position: relative;
	  }
	  .m_ba_butt{
	    width: 140rpx;
	    height: 100%;
	    float: left;
	    position: absolute;
	    top: 0;
	    left: 30rpx;
	  }
	  .m_ba_butt label{
	    background: #dcdcdc;
	    color: #fff;
	    padding: 6rpx 10rpx;
	    
	    border-radius: 4rpx;
	  }
	  .mach_tit{
	    width: 100%;
	    height: 100%;
	    float: left;
	    text-align: center;
	  }
	  .mach_item{
	    width: 100%;
	    height: auto;
	  }
	  .mci_tit{
	    width: 100%;
	    height: 70rpx;
	    line-height: 70rpx;
	    background: #EEEEEE;
	    color: #999;
	    font-size: 30rpx;
	    padding: 0 30rpx;
	    box-sizing: border-box;
	  }
	  .mci_cont{
	    width: 100%;
	    height: auto;
	    font-size: 28rpx;
	    padding: 0 30rpx;
	    box-sizing: border-box;
	    line-height: 70rpx;
	  }
	  .lab_item{
	    background: #EEEEEE;
	    padding: 4rpx 12rpx;
	    margin:0 10rpx;
	    color: #666;
	  }
	  .mach_butt{
	    height: 100rpx;
	    width: 100%;
	    margin: 60rpx 0;
	  }
	  .mc_bu{
	    height: 70rpx;
	    width: 150rpx;
	    font-size: 30rpx;
	    line-height: 70rpx;
	    background: #FE8061;
	    color: #fff;
	  }
	  .lai_cor{
	    border: 2rpx solid #4D95E6;
	    color: #4D95E6;
	    background: #fff;
	  }
	  .vid_box{
	    width: 100%;
	    margin-top: 20rpx;
	  }
	  .line_bott{
	    border: none;
	  }
	  .texta_box{
	    width: 90%;
	    min-height: 200rpx;
	    margin: auto;
	    border: none;
	    font-size: 28rpx;
	    border-bottom: 1rpx solid #f0f0f0;
	    padding-bottom: 20rpx;
	  }
	  .shangchuan_view {
	      height: 165rpx;
	      width: 165rpx;
	      margin-left: 19rpx;
	      display: inline-block;
	      margin-top: 20rpx;
	  }
	  
	  .shangchuan_Img {
	      position: absolute;
	      height: 165rpx;
	      width: 165rpx;
	  }
	  
	  .shangchuan_Img_close {
	      float: right;
	      height: 38rpx;
	      z-index: 5;
	      position: relative;
	      width: 38rpx;
	  }
	  
	  .bufa_btn {
	      background: #0AC2AE;
	      border-radius: 15rpx;
	      height: 72rpx;
	      width: 690rpx;
	      margin: 0 auto;
	      margin-top: 40rpx;
	      display: block;
	      text-align: center;
	      font-size: 28rpx;
	      color: #FFFFFF;
	      line-height: 72rpx;
	  }
	  
	  .jinggao {
	      font-size: 24rpx;
	      color: #9295A8;
	      width: 100%;
	      line-height: 80rpx;
	      text-align: center;
	  }
	  
	  .must_red {
	      color: red;
	  }
	  
	  .textarea_text {
	      position: relative;
	      z-index: 1000;
	      width: 650rpx;
	      padding-left: 20rpx;
	      padding-right: 20rpx;
	      height: 310rpx;
	      margin: 0 auto;
	      margin-top: -310rpx;
	      font-size: 24rpx;
	      color: #888888;
	  }
	  
	  .textarea_text_active {
	      color: #333;
	  }
	  
	  .dizhi_area {
	      width: 385rpx;
	      margin-top: 18rpx;
	      color: #9295A8;
	      font-size: 24rpx;
	      margin-left: 20rpx;
	      line-height: 50rpx;
	      display: inline-block;
	      height: 110rpx;
	  }
	  
	  .car_messageView {
	      width: 690rpx;
	      margin: 0 auto;
	      height: 88rpx;
	      border-bottom: 1rpx solid #f0f0f0;
	  }
	  
	  .car_messageView_input {
	      width: 600rpx;
	      float: left;
	      height: 88rpx;
	      color: #333;
	      font-size: 24rpx;
	  }
	  
	  .car_messageView_sc {
	      width: 90rpx;
	      float: left;
	      font-size: 24rpx;
	      color: #F75F5F;
	      text-align: right;
	      height: 88rpx;
	      line-height: 88rpx;
	  }
	  
	  .shangchuan_view_border {
	      width: 100%;
	      margin-top: -15rpx;
	  }
	  
	  .kefu_modle {
	      position: fixed;
	      top: 70rpx;
	      padding: 0;
	      width: 150rpx;
	      background: #fff;
	      margin: 0;
	      right: 10rpx;
	      z-index: 999;
	  }
	  
	  .kefu_modle_img {
	      height: 100rpx;
	      background: #fff;
	      border-radius: 100%;
	      margin: 0 auto;
	      display: block;
	      width: 100rpx;
	  }
	  
	  .kefu_modle_title {
	      width: 100%;
	      font-size: 27rpx;
	      color: #666666;
	      text-align: center;
	      line-height: 80rpx;
	  }
	  
	  button::after {
	      border: none;
	  }
	  
	  .btm_input {
	      width: 340rpx;
	      position: absolute;
	      right: 180rpx;
	  }
	  .texta_box{
	    width: 90%;
	    min-height: 200rpx;
	    margin: auto;
	    border: none;
	    font-size: 28rpx;
	    border-bottom: 1rpx solid #f0f0f0;
	    padding-bottom: 20rpx;
	  }
</style>
